<template>
  <div class="productCenterPc">
    <img class="banner" :src="banner?.[0]?.webimages" />
    <!-- 菜单 -->
    <product-center-tabs
      :list="nav.list"
      class="menu"
      @change="navChange('prime', $event)"
      :i="index"
    />

    <tabs
      :children="nav.list[nav.prime]?.children"
      :type="2"
      :key="nav.list[nav.prime]?.id"
      ref="tabs"
      :i="indexChildren"
      @change="navChange('secondary', $event)"
    ></tabs>

    <!-- 搜索 -->
    <form class="search-box">
      <div class="input-box">
        <img class="ic" src="../../../assets/image/header/ic_search.png" />
        <input
          v-model="searchInput"
          class="input"
          placeholder="搜一搜查询您想要的产品"
        />
      </div>
      <router-link
        :to="{ name: 'searchProduct', query: { search: searchInput } }"
      >
        <button class="btn">搜索</button>
      </router-link>
    </form>
    <div class="list">
      <router-link
        class="item"
        v-for="item in goods.list"
        :key="item"
        :to="{
          path: '/productDetail',
          query: {
            id: item.id,
            index: index,
          },
        }"
      >
        <img class="img" :src="item.images" />
        <div class="name-box">
          <div class="name">{{ item.name }}</div>
          <img
            class="arrow"
            src="../../../assets/image/product/ic_r-arrow.png"
          />
        </div>
      </router-link>
    </div>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-count="goods.total"
        @current-change="pageChange"
      />
    </div>
    <div class="video-box" v-if="video.list.length">
      <div class="bg-box">
        <img class="bg" src="../../../assets/image/product/p-video-bg.png" />
      </div>

      <div class="box">
        <video
          class="left"
          v-if="currentVideo"
          :key="currentVideo.id"
          :poster="currentVideo.webimages"
          controls
        >
          <source :src="currentVideo.videofile" type="video/mp4" />
        </video>
        <div class="right">
          <img
            class="item"
            v-for="(item, index) in video.list"
            :key="item.id"
            :src="item.webimages"
            @click="video.index = index"
          />
        </div>
      </div>
    </div>
    <div class="bottom">
      <img
        class="img"
        v-for="item in webJump"
        :key="item.id"
        :src="item.webimage"
        @click="toWeb(item)"
      />
    </div>
  </div>

  <!-- 移动端 -->
  <div class="productCenterMobile">
    <img class="banner" :src="banner?.[0]?.mobileimages" />
    <!-- 菜单 -->
    <product-center-tabs
      :list="nav.list"
      class="menu"
      @change="navChange('prime', $event)"
      :i="index"
    />
    <div class="tabs">
      <tabs
        :children="nav.list[nav.prime]?.children"
        :type="2"
        :key="nav.list[nav.prime]?.id"
        ref="tabs"
        @change="navChange('secondary', $event)"
      ></tabs>
    </div>
    <!-- 搜索 -->
    <form class="search-box">
      <div class="input-box">
        <img class="ic" src="../../../assets/image/header/ic_search.png" />
        <input
          v-model="searchInput"
          class="input"
          placeholder="搜一搜查询您想要的产品"
        />
      </div>
      <router-link
        :to="{ name: 'searchProduct', query: { search: searchInput } }"
      >
        <button class="btn">搜索</button>
      </router-link>
    </form>
    <div class="list">
      <router-link
        class="item"
        v-for="item in goods.list"
        :key="item"
        :to="{
          path: '/productDetail',
          query: {
            id: item.id,
            index: index,
          },
        }"
      >
        <img class="img" :src="item.images" />
        <div class="name-box">
          <div class="name">{{ item.name }}</div>
          <img class="ic" src="../../../assets/image/product/ic_r-arrow.png" />
        </div>
      </router-link>
    </div>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-count="goods.total"
        @current-change="pageChange"
      />
    </div>
    <div class="video-box" v-if="video.list.length">
      <img class="bg" src="../../../assets/image/product/m-video-bg.png" />
      <div class="box">
        <video
          class="left"
          v-if="currentVideo"
          :key="currentVideo.id"
          :poster="currentVideo.mobileimages"
          controls
        >
          <source :src="currentVideo.videofile" type="video/mp4" />
        </video>
        <app-scrollbar class="right">
          <div class="scrollbar">
            <img
              class="item-img"
              v-for="(item, index) in video.list"
              :key="item.id"
              :src="item.mobileimages"
              @click="video.index = index"
            />
          </div>
        </app-scrollbar>
        <!-- <div class="right">
          <img
            class="item-img"
            v-for="(item, index) in video.list"
            :key="item.id"
            :src="item.mobileimages"
            @click="video.index = index"
          />
        </div> -->
      </div>
    </div>
    <div class="bottom">
      <img
        class="img"
        v-for="item in webJump"
        :key="item.id"
        :src="item.mobileimage"
        @click="toWeb(item)"
      />
    </div>
  </div>
</template>

<script>
import tabs from "@/components/tabs.vue";
import productCenterTabs from "@/components/product-center-tabs.vue";
export default {
  components: { tabs, productCenterTabs },
  data() {
    return {
      id: "", //成人药 儿童药id
      banner: [],
      index: 0,
      indexChildren: 0,
      searchInput: "",
      nav: {
        list: [],
        prime: 0,
        secondary: 0,
      },
      goods: {
        page: 1,
        list: [],
        keywords: "",
        total: 1,
      },
      video: {
        list: [],
        index: 0,
      },
      webJump: [],
    };
  },
  watch: {
    $route(to) {
      if (to.name == "productCenter") {
        this.index = 0;
        this.nav.prime = this.index;

        this.init();
        this.getBanner();
      }
      if (to.name == "productCenterChildren") {
        this.index = 1;
        this.nav.prime = this.index;

        this.init();
        this.getBanner();
      }
    },
  },
  computed: {
    currentVideo() {
      return this.video.list[this.video.index] || {};
    },
  },
  created() {},
  mounted() {
    // 初始化数据
    this.init();
    this.getBanner();
  },
  methods: {
    async getBanner() {
      try {
        let id;
        //菜单Id写死 根据ID 获取不同的轮播
        if (this.index == 0) {
          id = 6;
        } else {
          id = 7;
        }
        const result = await this.$request.get("khcommon/banner", {
          params: {
            navId: id,
          },
        });
        this.banner = result.data;
      } catch (e) {
        // 错误状态
        this.$message.error(e.message);
      }
    },
    /**
     * 初始化数据
     */
    async init() {
      //切换下标
      if (this.$router.currentRoute.value.name == "productCenter") {
        this.index = 0;
        this.nav.prime = this.index;
      }

      if (this.$router.currentRoute.value.name == "productCenterChildren") {
        this.index = 1;
        this.nav.prime = this.index;
      }

      //搜索
      // if (this.$route?.query?.search) {
      //   this.searchInput = this.$route.query.search;
      //   this.search();
      // }
      // 获取导航
      const result = await this.$request.get("Productcenter/productNav");
      const webJump = await this.$request.get("Productcenter/webJump");

      this.webJump = webJump.data;
      // 设置导航
      this.nav.list = result.data;

      this.id = this.nav.list?.[this.index].id;

      // 获取商品
      this.getGoods();

      // 获取视频
      this.getVideo();
    },
    /**
     * 搜索
     */
    search() {
      this.$router.push({
        name: "searchProduct",
        query: { search: this.searchInput },
      });
      // 切换分页
      // this.pageChange(1);
    },
    /**
     * 跳网店
     */
    toWeb(e) {
      window.open(e.url);
    },
    /**
     * 切换导航
     */
    async navChange(level, e) {
      // 切换下标
      this.nav[level] = e;

      if (level == "prime") {
        this.index = e;
        this.getBanner();
        this.nav.secondary = 0;
      }

      // 切换分页
      this.pageChange(1);

      // 获取视频
      this.getVideo();
    },
    /**
     * 切换分页
     */
    async pageChange(e) {
      // 设置分页
      this.goods.page = e;

      // 获取数据;
      await this.getGoods();
    },
    /**
     * 获取数据
     */
    async getGoods() {
      // 获取数据
      const result = await this.$request.get("Productcenter/productIndex", {
        params: {
          cid: this.nav?.list[this.nav.prime]?.children[this.nav.secondary].id,
          page: this.goods.page,
          //   keywords: this.searchInput,
          pagenum: 8,
        },
      });

      // 设置数据
      this.goods.list = result.data.product;

      this.goods.total = result.data.totalpage || 1;
    },
    /**
     * 获取视频
     */
    async getVideo() {
      const result = await this.$request.get("Productcenter/videoIndex", {
        params: {
          cid: this.id,
        },
      });

      this.video.list = result.data;
      // this.video.list.push(this.video.list[0]);
      // this.video.list.push(this.video.list[0]);
      // this.video.list.push(this.video.list[0]);
    },
    /**
     * 产品详情
     */
    detail(e) {
      this.$router.push({
        path: "/productDetail",
        query: {
          id: e.id,
          index: this.index,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .productCenterMobile {
    display: none;
  }

  .productCenterPc {
    // width: fn.wpx(1200);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 45px;
    position: relative;
    background: #fff;

    .banner {
      width: 100%;
      height: 375px;
      object-fit: cover;
    }

    .menu {
      position: relative;
      top: -37px;
    }

    .search-box {
      margin-top: 48px;
      display: flex;
      width: 592px;
      height: 47px;
      align-items: center;

      .input-box {
        width: 386px;
        height: 48px;
        background: #ffffff;
        border: 1px solid #dfdfdf;
        border-radius: 24px;
        display: flex;
        height: 47px;
        align-items: center;

        .ic {
          margin-left: 10px;
          width: 47px;
          height: 47px;
        }

        .input {
          outline: none;
          padding-left: 10px;
          color: #030303;
          border: none;
          background-color: transparent;
          display: flex;
          align-items: center;
          width: 250px;
          height: 18px;
          font-size: 18px;
        }

        input::-webkit-input-placeholder {
          color: #c9c9c9;
        }
      }

      .btn {
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 23px;
        width: 184px;
        height: 48px;
        background: color.$base;
        border-radius: 24px;
        color: #fff;
        outline: none;
        padding: 0;
        border: none;
        font-size: 18px;

        &:active {
          background: rgba(210, 217, 236, 0.878);
        }
      }
    }

    .pagination {
      margin-top: 67px;
      width: 100%;
      display: flex;
      justify-content: center;
    }

    .list {
      width: 1230px;
      display: flex;
      flex-wrap: wrap;
      //  gap: 32px;
      margin-top: 60px;
      box-sizing: border-box;
      // padding: 0 12px;

      .item {
        margin: 15px;
        cursor: pointer;
        box-sizing: border-box;
        // padding: 26px 0;
        width: 276px;
        height: 276px;
        background: #f6f6f6;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        // justify-content: space-between;

        .img {
          margin-top: 40px;
          @include fn.scale(230px);
        }

        .name-box {
          margin-top: 40px;
          justify-content: space-between;
          display: flex;
          width: 230px;
          height: 36px;
          align-items: center;
          border: 1px solid #cac8c7;
          border-radius: 18px;

          .name {
            @include fn.ellipsis(1);
            margin-left: 17px;
            font-size: 16px;
            color: #2e2e2f;
          }

          .ic {
            margin-right: 6px;
            height: 32px;
            width: 32px;
          }
        }

        &:hover {
          .name-box {
            background: linear-gradient(0deg, #ee7800, #f29539);
            border: 1px solid color.$base;

            .name {
              color: #fff;
            }
          }
        }
      }
    }

    .video-box {
      position: relative;
      width: 100%;
      margin-top: 130px;
      display: flex;
      flex-direction: column;
      align-items: center;

      // background-image: url("~@/assets/image/product/p-video-bg.png");

      .bg-box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;

        .bg {
          width: 1260px;
          height: 120px;
        }
      }

      .box {
        position: relative;

        // z-index: 1;
        // margin-top: 43px;
        // height: 565px;
        // background: #ffffff;
        // box-shadow: 0px 12px 35px 0px rgba(192, 98, 2, 0.15);
        // border-radius: 6px;
        // display: flex;
        @include fn.container;
        margin-top: 43px;
        background: #ffffff;
        box-shadow: 0px 12px 35px 0px rgb(192 98 2 / 15%);
        border-radius: 6px 6px 6px 6px;
        display: flex;

        .left {
          // margin-top: 49px;
          // margin-left: 54px;
          // width: 878px;
          // height: 469px;

          // opacity: 0.35;
          overflow: hidden;
          margin-top: 49px;
          margin-bottom: 49px;
          margin-left: 54px;
          @include fn.scale(873px);
        }

        .right {
          // overflow-y: overlay;
          // display: flex;
          // flex-direction: column;
          // gap: 16px;
          // margin-top: 49px;
          // margin-left: 15px;
          // width: 220px;
          // height: 469px;
          overflow-y: overlay;
          display: flex;
          flex-direction: column;
          //   gap: 16px;
          margin-top: 49px;
          margin-bottom: 49px;
          margin-left: 15px;
          height: 491px;
          flex: 1;
          padding-right: 20px;

          /*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
          &::-webkit-scrollbar {
            width: 6px;
            height: 16px;
            background-color: #f5f5f5;
          }

          /*定义滚动条轨道
 内阴影+圆角*/
          &::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 3px #f5f5f5;
            border-radius: 3px;
            background-color: #f5f5f5;
          }

          /*定义滑块
 内阴影+圆角*/
          &::-webkit-scrollbar-thumb {
            border-radius: 3px;
            -webkit-box-shadow: inset 0 0 3px color.$base;
            background-color: color.$base;
          }

          .item:first-child {
            margin-top: 0px;
          }

          .item {
            flex-shrink: 0;
            margin-top: 15px;
            // width: 197px;
            // height: 105px;
            background: #000000;
            // opacity: 0.2;
            cursor: pointer;
            @include fn.scale(197px);
          }
        }
      }
    }

    .bottom {
      margin-top: 70px;
      width: 1200px;
      display: flex;
      justify-content: space-around;

      .img {
        cursor: pointer;
        width: 612px;
        // height: 302px;
        height: fn.scale(612);
        // object-fit: cover;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .productCenterPc {
    display: none;
  }

  .productCenterMobile {
    // width: fn.wpx(1200);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: fn.rpx(45);
    position: relative;
    background: #fff;

    .banner {
      width: 100%;
      height: fn.rpx(660);
    }

    .menu {
      position: relative;
      // top: -37px;
    }

    .tabs {
      margin-top: fn.rpx(40);
    }

    .search-box {
      margin-top: fn.rpx(48);
      display: flex;
      width: fn.rpx(592);
      height: fn.rpx(47);
      align-items: center;

      .input-box {
        width: fn.rpx(386);
        height: fn.rpx(48);
        background: #ffffff;
        border: 1px solid #dfdfdf;
        border-radius: fn.rpx(24);
        display: flex;
        height: fn.rpx(47);
        align-items: center;

        .ic {
          margin-left: fn.rpx(10);
          width: fn.rpx(47);
          height: fn.rpx(47);
        }

        .input {
          outline: none;
          padding-left: fn.rpx(10);
          color: #030303;
          border: none;
          background-color: transparent;
          display: flex;
          align-items: center;
          width: fn.rpx(250);
          height: fn.rpx(18);
          font-size: fn.rpx(18);
        }

        input::-webkit-input-placeholder {
          color: #c9c9c9;
        }
      }

      .btn {
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: fn.rpx(23);
        width: fn.rpx(184);
        height: fn.rpx(48);
        background: color.$base;
        border-radius: fn.rpx(24);
        color: #fff;
        outline: none;
        padding: 0;
        border: none;
        font-size: fn.rpx(18);

        &:active {
          background: rgba(210, 217, 236, 0.878);
        }
      }
    }

    .pagination {
      margin-top: fn.rpx(50);
      width: 100%;
      display: flex;
      justify-content: center;
    }

    .list {
      box-sizing: border-box;
      width: fn.rpx(700);
      display: flex;
      flex-wrap: wrap;
      //  gap: fn.rpx(32);
      margin-top: fn.rpx(50);
      // padding: 0 fn.rpx(37);
      justify-content: space-between;

      .item {
        margin: fn.rpx(10) 0;
        cursor: pointer;
        box-sizing: border-box;
        width: fn.rpx(340);
        padding: fn.rpx(20);
        background: #f6f6f6;
        border-radius: fn.rpx(4);
        display: flex;
        flex-direction: column;
        align-items: center;
        // justify-content: space-between;

        .img {
          @include fn.scale(fn.rpx(300));
        }

        .name-box {
          margin-top: fn.rpx(20);
          justify-content: space-between;
          display: flex;
          width: fn.rpx(300);
          height: fn.rpx(36);
          align-items: center;
          border: fn.rpx(2) solid #cac8c7;
          border-radius: fn.rpx(18);

          .name {
            @include fn.ellipsis(1);
            margin-left: fn.rpx(17);
            font-size: fn.rpx(16);
            color: #2e2e2f;
          }

          .ic {
            object-fit: cover;
            margin-right: fn.rpx(6);
            height: fn.rpx(40);
            width: fn.rpx(40);
          }
        }

        &:hover {
          .name-box {
            background: linear-gradient(0deg, #ee7800, #f29539);
            border: fn.rpx(1) solid color.$base;

            .name {
              color: #fff;
            }
          }
        }
      }
    }

    .video-box {
      position: relative;
      width: 100%;
      margin-top: fn.rpx(50);
      display: flex;
      flex-direction: column;
      align-items: center;

      .bg {
        width: fn.rpx(709);
        height: fn.rpx(37);
      }

      .box {
        position: relative;
        width: fn.rpx(700);
        margin-top: fn.rpx(-10);
        background: #ffffff;
        box-shadow: 0px fn.rpx(12) fn.rpx(35) 0px rgb(192 98 2 / 15%);
        border-radius: fn.rpx(6);
        display: flex;
        flex-direction: column;
        align-items: center;

        .left {
          object-fit: cover;
          box-sizing: border-box;
          @include fn.scale(fn.rpx(630));
          margin-top: fn.rpx(49);
          margin-bottom: fn.rpx(17);
        }

        .right {
          display: flex;
          margin-bottom: fn.rpx(50);
          width: fn.rpx(630);

          .scrollbar {
            margin-bottom: fn.rpx(20);
            display: flex;
          }

          .item-img:first-child {
            margin-left: 0;
          }

          .item-img {
            @include fn.scale(fn.rpx(147));
            flex-shrink: 0;
            box-sizing: border-box;
            margin-left: fn.rpx(14);
            background: #000000;
            cursor: pointer;
          }
        }
      }
    }

    .bottom {
      margin-top: fn.rpx(50);
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .img {
        cursor: pointer;
        // width: fn.rpx(583);
        // height: fn.rpx(267);
        @include fn.scale(fn.rpx(700));
      }
    }
  }
}
</style>